<template>
  <div class="game">
        <!-- 初始化页面 -->
        <div class="initgame" v-if="showPage === 'initgame'">
            <div class="initgame-title">
                防呆小游戏
            </div>
            <div class="initgame-logo">
                <img src="../assets/gif/1.gif" alt="">
            </div>
            <div class="initgame-btn" @click="beginGame">
                开始游戏
            </div>
            <div class="initgame-role" @click="openrule">
                游戏规则
            </div>
            <div class="initgame-dev">
                @开发者：<span>a2563204046</span>
            </div>
        </div>

        <div class="rolegame" v-else-if="showPage === 'rolegame'">
            <div class="ftgame-back iconfont icon-qiepian42" @click="back"></div>
            <div class="rolegame-title">
                游戏规则
            </div>
            <div class="rolegame-main">
                <p>1.在六个选择中选择上一张提示照片,选择正确+1分,难度+1级;选择错误,游戏结束。</p>
                <p>2.当难度提升至20级时,提示照片刚在一秒后消失。</p>
                <p>3.当选择项中有相同的照片时,可任意选择一张(其实是一个没解决的bug)。</p>
            </div>
        </div>

        <!-- 初次开始游戏 -->
        <div class="ftgame" v-else-if="showPage === 'ftgame'">
            <div class="ftgame-back iconfont icon-qiepian42" @click="back"></div>
            <div class="ftgame-img">
                <img :src = beforeImage alt="" class="animate__animated animate__fadeInLeft animate__fast">
            </div>
            <div class="ftgame-prompt">
                请记住当前此张 <strong>图片</strong>
            </div>
            <div class="ftgame-btn" @click="FirstConfirm" >
                确认
            </div>
        </div>

        <!-- 开始游戏页面 -->
        <div class="rungame" v-else-if="showPage === 'rungame'">
            <div class="rungame-back iconfont icon-qiepian42" @click="back"></div>
             <div class="rungame-score">
                 得分：<strong>{{score}}</strong>
             </div>
             <div class="rungame-img">
                 <img :src = nowImage alt="" :class="{'animate__animated animate__flipOutY': level > 20}" :key="nowimagekey">
             </div>
             <div class="rungame-role">
                <p>记住当前此张照片</p>
                <p>请在以下选项中选择上一张照片</p>
             </div>
             <div class="rungame-choose">
                <div class="rungame-choose-img" v-for="(item,i) in imageUrlIndex" :key='i'>
                    <div :class="{'iconfont icon-queren': i == chooseImageIndex}"></div>
                    <img :src = item alt="" :key='keyNum' @click='choose(i)'>
                </div>
             </div>
             <div class="rungame-btn" :class="{'ischoose': chooseImageIndex != 999}" @click='runConfirm'>
                确定
             </div>
        </div>

        <!-- 游戏结束页面 -->
        <div class="overgame" v-else-if="showPage === 'overgame'">
            <div class="overgame-mask"></div>
            <div class="overgame-show">
                Game Over
            </div>
            <div class="overgame-img">
                <img src="../assets/gif/2.gif" alt="">
            </div>
            <div class="overgame-score">
                得分：<strong>{{score}}</strong>
            </div>
            <div class="overgame-adv">
                {{overgametext}}
            </div>
            <div class="overgame-back" @click="overgameBack">
                再玩一次
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            showPage: 'initgame',
            beforeImage: "",
            nowImage: "",
            beforeImageIndex: 20,
            nowImageIndex: 20,
            chooseImage: "",
            chooseImageIndex: 999,  // 用户选择了第几张照片
            trueindex: 999,         // 用户选择的照片索引
            imageIndex: [],
            imageUrlIndex: [],  // 选择项图片的索引
            keyNum: 0,          // 刷新选择项图片
            level: 0,           // 游戏进行的关卡数
            score: 0,
            nowimagekey: 0,
            overgametext: ""
        }
    },
    created() {
        
    },
    methods: {
        /* 点击开始游戏(初次进入) */
        changeShow(nav) {
            this.showPage = nav;
        },
        /* 返回首页 */
        back() {
            this.showPage = 'initgame';
            this.initlesc();
        },
        /* 点击开始游戏 */
        beginGame() {
            this.changeShow('ftgame');
            this.getBeforeImage();
        },
        /* 初次进入游戏选择确认键 */
        FirstConfirm() {
            this.changeShow('rungame');
            this.getNowImage();
            this.level = 1;
            this.getChooseImage();
        },
        /* 游戏进行中选择确认键 */
        runConfirm() {
            /* 对选择的照片进行判断 */
            if(!this.choosetrue()) {
                this.changeShow('overgame');
                return;
            }
            /* 获取本次游戏照片 */
            this.getNowImage();
            /* 关卡数增加 */
            this.addLevelScore();
            /* 获取选择项图片 */
            this.getChooseImage();
            this.chooseImageIndex = 999;
        },
        /* 点击再玩一次 */
        overgameBack() {
            this.changeShow('initgame');
            this.initlesc();
        },
        /* 点击游戏规则 */
        openrule() {
            this.changeShow('rolegame');
        },
        /* 初始化数据 */
        initlesc() {
            this.level = 0;
            this.score = 0;
            this.chooseImageIndex = 999;
        },
        /* 判断用户选择的正确与否 */
        choosetrue() {
            if(this.trueindex == this.beforeImageIndex) return true;
            return false;
        },
        /* 选择图片操作 */
        choose(i) {
            this.chooseImageIndex = i;
            this.trueindex = this.imageIndex[i];
        },
        /* 关卡以及得分的增加 */
        addLevelScore() {
            this.level ++;
            this.score ++;
            /* 重置用户选项图片索引 */
            this.chooseImageIndex = 999;
        },
        /* 获取初次进入游戏图片 */
        getBeforeImage() {
            if(this.level == 0) {
                this.beforeImageIndex = this.randImage();
                this.beforeImage = require("../assets/image/"+ this.beforeImageIndex +".jpg");
            }
        },
        /* 获取本次游戏照片 */
        getNowImage() {
            this.level > 0 && (this.beforeImageIndex = this.nowImageIndex);
            while(this.beforeImageIndex == this.nowImageIndex) {
                this.nowImageIndex = this.randImage();
            }
            this.nowImage = require("../assets/image/"+ this.nowImageIndex +".jpg");
            this.nowimagekey ++;
        },
        /* 获取选项图片 */
        getChooseImage() {
            this.imageIndex = this.randImage(4);
            this.imageIndex[4] = this.beforeImageIndex;
            this.imageIndex[5] = this.nowImageIndex;
            /* 打乱选择项索引 */
            this.imageIndex = this.upset(this.imageIndex);
            this.imageIndex.forEach((value,index) => {
                this.imageUrlIndex[index] = require("../assets/image/"+ value +".jpg")
            });
            this.keyNum ++;
        },
        /* 打乱选择项 */
        upset(arr) {
            for (let i = 0; i < arr.length; i++) {
                let iRand = parseInt(arr.length * Math.random());
                let temp = arr[i];
                arr[i] = arr[iRand];
                arr[iRand] = temp;
            }
            return arr;
        },
        /* 封闭随机数函数 num为产生随机数的个数(不重复) */
        randImage(num = 1) {
            let [arr,indexNum] = [[],0];
            if(num === 1) {
                return parseInt(Math.random()*55+1);
            }else {
                while(num) {
                    arr[indexNum ++ ] = parseInt(Math.random()*55+1);
                    /* 判断数组是否重复 */
                    for(let i = 0; i < indexNum - 1; i++) {
                        if(arr[indexNum-1] == arr[i] || arr[indexNum-1] == this.beforeImageIndex || arr[indexNum-1] == this.nowImageIndex) {
                            indexNum --;
                            num ++;
                            console.log(arr);
                        }
                    }
                    num --;
                }
                return arr;
            }
        },
    },
    computed: {
        
    }
}

</script>

<style lang='scss'>
*{margin: 0;padding: 0;font-family: '微软雅黑','黑体','宋体'; font-size: 14px; color: #333;}
a{text-decoration: none;}
ul ol{list-style: none;}
img{border: none;}
input,textarea{outline: none;}

.game{
    width: 300px;
    height: 540px;
    border: 1px solid #000;
    margin: 0 auto;
    margin-top: 60px;
    background-color: rgba(0, 255, 255, .3);
    border-radius: 30px;
    overflow: hidden;
    .initgame{
        position: relative;
        height: 540px;
        &-title{
            text-align: center;
            font-size: 36px;
            padding-top: 60px;
            font-weight: bold;
            color: #444;
        }
        &-logo{
            height: 160px;
            width: 100%;
            margin: 40px 0;
            background: #fff;
            position: relative;
            img{
                position: absolute;
                left: 50%;
                transform: translate(-50%,0);
                width: 60%;
                height: 100%;
            }
        }
        &-btn{
            cursor: pointer;
            margin: 20px auto;
            width: 180px;
            height: 60px;
            border-radius: 20px;
            text-align: center;
            line-height: 60px;
            font-size: 32px;
            background: #f40;
            box-shadow: 2px 4px 4px 2px;
        }
        &-role{
            cursor: pointer;
            text-align: center;
            font-size: 20px;
            margin: 40px;
        }
        &-dev{
            text-align: center;
            margin-top: 20px;
            span{
                font-weight: bold;
            }
        }
    }
    .rolegame{
        &-title{
            text-align: center;
            margin-top: 40px;
            font-size: 32px;
            color: #444;
        }
        &-main{
            p{
                font-size: 16px;
                margin: 10px;
            }
        }
    }
    .ftgame{
        height: 540px;
        position: relative;
        &-back{
            cursor: pointer;
            font-size: 24px;
            padding-top: 20px;
            margin-left: 20px;
        }
        &-img{
            text-align: center;
            padding-top: 40px;
            img{
                width: 240px;
                height: 160px;
            }
        }
        &-prompt{
            text-align: center;
            margin-top: 40px;
            font-size: 20px;
            strong{
                font-size: 30px;
            }
        }
        &-btn{
            cursor: pointer;
            width: 160px;
            height: 60px;
            text-align: center;
            font-size: 32px;
            border-radius: 20px;
            line-height: 60px;
            margin: 90px auto 0 auto;
            font-weight: bold;
            background-color: #f40;
            box-shadow: 2px 4px 4px 2px;
        }
    }
    .rungame{
        position: relative;
        &-back{
            position: absolute;
            font-size: 24px;
            left: 20px;
            top: 20px;
            cursor: pointer;
        }
        &-score{
            margin-left: 110px;
            padding-top: 16px;
            font-size: 24px;
            strong{
                font-size: 24px;
            }
        }
        &-img{
            margin-top: 30px;
            text-align: center;
            img{
                height: 120px;
                width: 210px;
            }
        }
        &-role{
            text-align: center;
            margin-top: 10px;
            p{
                font-size: 18px;
            }
        }
        &-choose{
            width: 260px;
            height: 200px;
            margin: 0 auto;
            padding-top: 10px;
            &-img{
                width: 100px;
                float: left;
                margin-left: 20px;
                margin-top: 3px;
                position: relative;
                img{
                    cursor: pointer;
                    width: 100px;
                    height: 60px;
                }
                .icon-queren{
                    font-size: 32px;
                    position: absolute;
                    color: #f40;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }
            }
        }
        &-btn{
            cursor: pointer;
            width: 100px;
            height: 40px;
            text-align: center;
            font-size: 24px;
            border-radius: 20px;
            line-height: 40px;
            margin: 10px auto 0 auto;
            font-weight: bold;
            background-color: #ccc;
            box-shadow: 2px 4px 4px 2px;
        }
        .ischoose{
            background-color: #f40;
            transition: 0.5s;
        }
    }
    .overgame{
        position: relative;
        &-mask{
            width: 100%;
            height: 540px;
            position: absolute;
            z-index: 998;
            background-color: rgba(0, 0, 0, .2);
        }
        &-show{
            font-size: 26px;
            position: absolute;
            left: 50%;
            color: #f40;
            margin-top: 30px;
            transform: translateX(-50%);
            z-index: 999;
        }
        &-img{
            position: absolute;
            z-index: 999;
            height: 160px;
            width: 100%;
            margin-top: 90px;
            background-color: #fff;
            text-align: center;
            img{
                height: 160px;
                width: 60%;
            }
        }
        &-score{
            position: absolute;
            z-index: 999;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 280px;
            font-size: 24px;
            strong{
                font-size: 24px;
            }
        }
        &-adv{
            position: absolute;
            z-index: 999;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 360px;
            font-size: 12px;
        }
        &-back{
            position: absolute;
            z-index: 999;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 420px;
            font-size: 20px;
            background: #f40;
            padding: 10px;
            border-radius: 15px;
            cursor: pointer;
        }
    }
}
</style>
